<!--
 * @Author: 89-83-77
 * @Description: 请填写当前文件简介
 * @Date: 2025-03-27 17:01:06
 * @LastEditTime: 2025-03-27 23:25:19
 * @FilePath: \event-analysis-systemd:\Desktop\client\src\views\Workbench.vue
-->
<template>
    <div class="workbench">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in stats" :key="item.title">
                <el-statistic :title="item.title" :value="item.value" :precision="item.precision" />
            </el-col>
        </el-row>

        <el-divider />

        <el-card>
            <template #header>
                <span>最近操作</span>
            </template>
            <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const stats = ref([
    { title: '今日访问量', value: 1024 },
    { title: '新增用户', value: 56, precision: 0 },
    { title: '销售额', value: 23456.78, prefix: '¥' },
    { title: '转化率', value: 86.32, suffix: '%', precision: 2 }
])

const activities = ref([
    { timestamp: '10:00', content: '用户张三创建了新订单' },
    { timestamp: '11:20', content: '系统配置已更新' },
    { timestamp: '14:36', content: '数据备份完成' }
])
</script>
<style lang="less" scoped>
.workbench {
    :deep(.el-statistic) {
        margin-bottom: 20px;
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }
}
</style>